<template>
  <div id="app" class="app">
    <h1>{{ msg }},学生姓名是{{studentName}}</h1>
    <!--通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第一种写法使用v-on:或者@)-->
    <!--不加native就被视为自定义事件-->
    <Student v-on:atguigu="getStudentName" @demo="unbind" @click.native="show"></Student>
    <!--<Student @atguigu.once="getStudentName"></Student>-->
    <!--通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第二种写法使用ref)，灵活性很强-->
    <!--<Student ref="student"></Student>-->
    <!--通过父组件给子组件传递函数类型的props实现：子给父传递数据-->
    <School :getSchoolName="getSchoolName"></School>
  </div>
</template>

<script>
//样式根据引入顺序后来者居上
import Student from "@/components/Student.vue";
import School from "@/components/School.vue";

export default {
  name: 'App',
  components: {
    School,
    Student,
  },
  data() {
    return {
      msg: '你好啊！！！',
      studentName:''
    }
  },
  methods: {
    getSchoolName(name) {
      console.log('收到了学校名', name)
    },
    // es6接受参数的方式，将剩余的参数以数组的形式放入params中
    getStudentName(name,...params) {
      console.log('收到了学生名', name,params)
      this.studentName=name
    },
    unbind(){
      console.log('触发了！！！！！！！！！！11')
    },
    show(){
      console.log('触发了show--------')
    }

  },
  mounted() {
    // 灵活性强，可以在一个方法后再挂载
  /*  setTimeout(() => {
      this.$refs.student.$on('atguigu', this.getStudentName)
    },3000)*/

    // 只触发一次
    // this.$refs.student.$once('atguigu', this.getStudentName)

  }
}
</script>

<style>
.app {
  background-color: #2b542c;
  padding: 5px;
}
</style>
